<template>
<div class="tc-left pr10 fl">
    <ul class="clearfix uiTab1 mb5 j_outerHeight">
        <li class="col-md-3 fl uiTab1-active"><a href="javascript:">项</a></li>
    </ul>
    <div class="daily_title j_outerHeight">
        <ul class="clearfix">
            <li class="title_cur">全</li>
            <li><span class="lineDistance hide">┆</span>嵌</li>
            <span aria-hidden="true" class="iconfont icon-add icon-2x bold pointer cBlue fr mt2 mr5" @click="addPage()"></span>
        </ul>
    </div>
    <div class="contentbox">
        <table class="uiTable j_outerHeight">
            <thead>
                <tr>
                    <th width="30%">
                        <select class="theadselect thinScroll">
                            <option value="">地区</option>
                        </select>
                    </th>
                    <th width="20%" class="tx-center">设计</th>
                    <th width="20%">
                        <select class="theadselect thinScroll">
                            <option value="">阶段</option>
                        </select>
                    </th>
                    <th width="15%">周期</th>
                    <th width="15%">剩余</th>
                </tr>
            </thead>
        </table>
        <div class="scroll-content thinScroll thinScroll-table" v-scrollHeight="36">
            <div class="thinScroll-infinite thinScroll thinScroll-table"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="busy"
                infinite-scroll-immediate-check="false"
                infinite-scroll-distance="0">
                <table class="uiTable pointertable uiTable-striped uiTable-hover">
                    <tbody>
                        <tr v-for="(item,index) in leftListData" :key="index" :class="{'tractive':index == trIndex}" @click="siderBarTrclick(index,item)">
                            <td width="30%">{{ item.ci_RwdId.slice(3) }}</td>
                            <td width="20%">
                                <span>{{item.ci_DesignerName || '-'}}</span>
                            </td>
                            <td width="20%">
                                <span>{{ item.ci_Stage | stage }}</span>
                            </td>
                            <td width="15%">{{item.DiffDate}}</td>
                            <td width="15%">
                                <span>{{item.DiffHoure}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="j_outerHeight clearfix tj_bottom">
            <p class="col-md-3" data-title="全部">{{leftListData.length}}</p>
            <p class="col-md-3 cGreen" data-title="正常">0</p>
            <p class="col-md-3 cOrange" data-title="异常">0</p>
            <p class="col-md-3 cRed" data-title="问题">0</p>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getManagerLeftList } from '../Resources/Api'
export default {
    data () {
        return {
            busy: false, // 滚动是否等待
            leftListData: [], // 遍历的数据
            trIndex: 0
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {
        this.loadMore()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        // 点击 + 号二段弹窗页面
        addPage () {
            this.$router.push('/ElementRx/Index/addPage')
        },
        // 到达底部是触发回调
        loadMore () {
            this.getManagerLeftList()
        },
        // 获取左侧列表
        getManagerLeftList () {
            this.busy = true
            getManagerLeftList({
                diqu: '',
                stage: '',
                startnumber: this.leftListData.length + 1,
                endnumber: this.leftListData.length + 60
            }).then(results => {
                // 合并数据
                this.leftListData = this.leftListData.concat(results.data.Body)
                // 取消等待
                this.busy = false
                // 如果没有点击过
                if (!this.leftInfo.ci_RwdId) {
                    this.siderBarTrclick(0, this.leftListData[0])
                }
            }).catch(error => { console.log(error) })
        },
        // 左侧点击事件
        siderBarTrclick (index, item) {
            // 保存字段时 一定要确认公共字段一致
            this.setLeftData(item)
            this.trIndex = index
            this.$router.push(this.$route.matched[1].path)
        }
    }
}
</script>
